<!-- 综合样例 -->

<!--自封闭标签：img br hr-->
<!--块级元素（独占一行）：div/p/h1-h6/table/ul-->
<!--行内元素（一行可以展示多个，排不下才会换行）：span/img/a/input-->

<!DOCTYPE html>
<!--lang: 常用的zh-cn、en（中文、英文）-->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <title>PageDemo</title>

    <style>
      body {
        /* 相对定位，父组件设置相对布局，其子组件可以设置为绝对定位 */
        position: relative;
      }

      .absoluteContent {
        /* 绝对定位 */
        position: absolute;
        top: 100px;
        right: 100px;
      }

      .container {
        width: 700px;
        margin: 0 auto;
        border: 1px solid #efefef;
        padding: 10px;
      }

      .shoucang {
        /*弹性布局*/
        display: flex;
        /*两端对齐*/
        justify-content: space-between;
      }

      .shoucang .right-wrap {
        display: flex;
        /*垂直居中*/
        align-items: center;
      }

      table {
        width: 100%;
        /* 使表格边框合并为单条线 */
        border-collapse: collapse;
        /* border-left: 1px solid #efefef;
        border-top: 1px solid #efefef; */
      }

      /* tr > td,
      tr > th {
        border-right: 1px solid #efefef;
        border-bottom: 1px solid #efefef;
      } */
    </style>
  </head>

  <body>
    <div class="container">
      <h1>标题</h1>
      <div class="shoucang">
        <!--title: 当前容器的提示内容-->
        <div title="提示内容">
          <span>小米</span>
          <!--href: 跳转作用，可以是网址，也可以是文件地址，或者邮箱唤起操作等等-->
          <a
            href="mailto:info@example.com"
            style="margin-left: 8px; color: blue"
            >20250605</a
          >
          <a href="mailto:info@example.com">发送邮件</a>
        </div>
        <div class="right-wrap">
          <img src="./img/ico_star_press1@2x.png" alt="" width="20" />
          <span id="myText">收藏</span>
        </div>
      </div>
      <div style="text-align: center">
        <!--src: 图片引入地址， alt: 图片找不到时的提示信息-->
        <img src="./img/myimg.png" alt="ddd.png" />
      </div>
      <!-- cellspacing：表格间距 -->
      <table cellspacing="0" border="1">
        <!-- 表格标题、描述 -->
        <caption>
          我的表格
        </caption>
        <thead>
          <tr>
            <!--列合并时要将当前行的多余列删除保证表格不错乱-->
            <th colspan="2">列1</th>
            <!-- 表头列用th -->
            <th>列2</th>
            <!-- <th>列3</th> -->
          </tr>
        </thead>

        <body>
          <tr>
            <td rowspan="2">1</td>
            <!--行合并时要将其余行多余列删除保证表格不错乱-->
            <td>1</td>
            <td>1</td>
          </tr>
          <tr>
            <td>1</td>
            <td>1</td>
          </tr>
        </body>
      </table>
      <button id="test" style="margin-top: 10px">条件测试</button>
    </div>
    <div
      class="absoluteContent"
      style="background: red; width: 100px; height: 100px"
    ></div>
  </body>
  <script>
    var conditonA = "10";
    var conditionB = 10;
    // 三目运算符
    // == 不进行类型判断， === 进类型判断
    document.getElementById("test").addEventListener("click", () => {
      let value =
        conditonA === conditionB ? "满足条件A的结果" : "满足条件B的结果";
      console.log(value);
    });

    if (conditonA == conditionB) {
      console.log("满足条件A的结果");
    } else {
      console.log("满足条件B的结果");
    }

    document
      .getElementsByClassName("right-wrap")[0]
      .addEventListener("click", () => {
        console.log("11");
        document.getElementById("myText").innerHTML =
          document.getElementById("myText").innerHTML == "收藏"
            ? "取消收藏"
            : "收藏";
      });
  </script>
</html>
